<template>
  <rect :x="x" :y="y" :width="width" :height="height" fill="none" :stroke="opt.borderColor" :stroke-width="opt.borderWidth" :stroke-dasharray="opt.dashArray" ref="frame"/>
</template>

<script>
import Draggable from 'gsap/Draggable'

export default {
  props: {
    option: {}
  },
  data () {
    return {
      startPoint: { x: 0, y: 0 }, // 起点
      finishPoint: { x: 0, y: 0 }, // 终点
      isStart: false, // 是否开始框选
      isFinished: false, // 是否可结束框选
      left: 0, // 框的左边界
      right: 0, // 框的右边界
      top: 0, // 框的上边界
      bottom: 0, // 框的下边界
      isActived: false // 是否活动中，即鼠标是否按下
    }
  },
  methods: {
    /**
     * 设置起点
     * @param  {Number} options.x x坐标
     * @param  {Number} options.y y坐标
     * @author Jiangzhiwei
     * @time   2021-11-03T00:27:15+0800
     */
    setStartPoint ({ x, y } = { x: 0, y: 0 }) {
      this.isStart = true
      this.startPoint = { x, y }
      this.finishPoint = { x, y } // 使得起点终点相同，则不会显示出矩形
    },
    /**
     * 设置终点
     * @param  {Number} options.x x坐标
     * @param  {Number} options.y y坐标
     * @author Jiangzhiwei
     * @time   2021-11-03T00:28:41+0800
     */
    setFinishPoint ({ x, y }) {
      this.isFinished = true
      this.finishPoint = { x, y }
    },
    /**
     * 标记框选结束
     * @author Jiangzhiwei
     * @time   2021-11-03T00:22:32+0800
     */
    setOver () {
      this.setStartPoint()
      this.isStart = false
      this.isFinished = false
    },
    /**
     * 刷新边界
     * @author Jiangzhiwei
     * @time   2021-11-01T23:24:25+0800
     */
    refreshBounding () {
      if (this.startPoint.x < this.finishPoint.x) { // 起点x更小
        this.left = this.startPoint.x
        this.right = this.finishPoint.x
      } else { // 终点x更小
        this.left = this.finishPoint.x
        this.right = this.startPoint.x
      }
      if (this.startPoint.y < this.finishPoint.y) { // 起点y更小
        this.top = this.startPoint.y
        this.bottom = this.finishPoint.y
      } else { // 终点y更小
        this.top = this.finishPoint.y
        this.bottom = this.startPoint.y
      }
    },
    init () {
      this.node = Draggable.create(this.$refs.frame, {
        cursor: this.opt.cursor,
        activeCursor: this.opt.cursor
      })[0]
    },
    /**
     * 获取选中的组件
     * @return {Array} 组件
     * @author Jiangzhiwei
     * @time   2021-11-03T00:29:24+0800
     */
    getSelected () {
      const selectedComps = []
      const all = [...this.$parent.getNodeComps(), ...this.$parent.getLineComps()]
      all.forEach(item => {
        if (this.node.hitTest(item.$el)) {
          // if (item.type === 'line') {
          //   console.log(item.$refs.lineBox)
          //   console.log(this.node.hitTest(item.$refs.lineBox))
          // }
          selectedComps.push(item)
        }
      })
      // 如果节点被框选中，则还要将节点连接的连线也框选中
      const lineComps = this.$parent.getLineComps()
      selectedComps.forEach(item => {
        if (item.type === 'node') { // 如果是节点
          const id = item.data.id
          const comps = lineComps.filter(lineComp => lineComp.data.headNodeId === id ||
            lineComp.data.tailNodeId === id) // 相连的连线
          comps.forEach(lineComp => {
            if (selectedComps.findIndex(sitem => sitem.data.id === lineComp.data.id) === -1) { // 没框选中
              selectedComps.push(lineComp)
            }
          })
        }
      })
      return selectedComps
    }
  },
  computed: {
    opt () {
      const option = {
        borderWidth: 3, // 边框宽度
        borderColor: '#013ADF', // 边框颜色
        cursor: 'default', // 框选时光标样式
        dashArray: 6 // 虚线数组
      }
      return Object.assign(option, this.option)
    },
    x () {
      return this.left
    },
    y () {
      return this.top
    },
    width () {
      return this.right - this.left
    },
    height () {
      return this.bottom - this.top
    }
  },
  watch: {
    startPoint () {
      this.refreshBounding()
    },
    finishPoint () {
      this.refreshBounding()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
